import React from 'react'

import AssetGridCell from '../AssetGridCell'

class MessageEventKeyList extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    // console.log(this.props.name)
    this.$modal = $(ReactDOM.findDOMNode(this.refs.MessageSettingWordEdit))
  }

  renderList() {
    // var content = this.props.data.map(function(item) {
    //   return (
    //     <li>{item}</li>
    //   )
    // })

    var self = this;
    var content = [];

    if (this.props.data) {
      this.props.data.forEach(function(item) {
        content.push((
          <tr>
            <td>{item.event}</td>
            <td className="message-key-preview">{self.renderPreview(item)}</td>
            <td>{item.responseType}</td>
            <td><a onClick={(event)=>self.props.onMessageDelete(item)}>删除</a></td>
          </tr>
        ))
      })
    }

    return content;
  }

  renderPreview(item) {
    var self = this;
    if (item.responseType == 'text') {
      var content = item.content
      return (
        <div>{content.text}</div>
      )
    }else if (item.responseType == 'news') {
      var content = item.content
      var news_item = []
      for (var i = 0; i < content.news.length; i++) {
        var news = content.news[i];
        news_item.push({
          digest: news.msgDescription,
          url: news.msgUrl,
          title: news.msgTitle,
          thumb_url: news.msgPicUrl,
          thumb_media_id: news.msgPicId
        })
      }
      var assetContent = {
        content:{
          news_item: news_item
        }
      }
      return (
        <div className="message-news-list-preview row">
          <AssetGridCell
            wechat = {self.props.wechat}
            data = {assetContent}/>
        </div>
      )
    }
  }

  render() {
    return (
      <div className="message-eventkey-list">

        <table className="table">
          <thead>
            <tr className="table-title">
              <th>关键字</th>
              <th>回复</th>
              <th>类型</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>

      </div>
    )
  }
}

export default MessageEventKeyList
